<template>
  <div id="OrderForm">
    <div>
      <el-card
        class="box-card"
        v-for="(item, index) in leftData"
        :key="index"
        shadow="never"
      >
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
        </div>
        <div
          v-for="(tet, index) in item.text"
          :key="index"
          class="text item"
          @click="onPush(tet)"
        >
          {{ tet }}
        </div>
      </el-card>
    </div>
    <router-view></router-view>
  </div>
</template>
  
<script>
export default {
  name: "OrderForm",
  data() {
    return {
      leftData: [
        {
          title: "我的账户",
          text: [
            "个人中心",
            "消息通知",
            "个人信息",
            "安全设置",
            "地址管理",
            "我的积分",
            "我的足迹",
            "邀请有礼",
            "幸运抽奖",
          ],
        },
        {
          title: "交易管理",
          text: ["我的订单", "优惠劵", "礼品卡", "评价晒单", "售后服务"],
        },
        {
          title: "我的收藏",
          text: ["收藏的商品", "收藏的专题", "关注的品牌"],
        },
        {
          title: "帮助中心",
          text: ["帮助中心", "在线客服"],
        },
      ],
      activeName: "Order",
      listArr: [],
      islistArr: true,
      page: 1,
    };
  },
  methods: {
    onPush(a) {
      console.log(a);
      if (a == "个人中心") {
        this.$router.push("/NaviGation/OrderForm/my");
      } else if (a == "我的订单") {
        this.$router.push("/NaviGation/OrderForm/order");
      }
    },
  },
  created() {},
  watch:{
    // $route(to,from){
    //   console.log('to',to);
    //   console.log('from',from);
    // }
  }
};
</script>
  
 <style lang="scss" scoped>
#OrderForm {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  //左侧导航
  .el-card {
    border-bottom: 1px solid rgb(205, 200, 200);
    border-radius: 0;
  }
  ::v-deep .el-card__header {
    border: none;
  }
  .text {
    font-size: 14px;
    margin-left: 20px;
    color: #666;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix {
    margin-left: 20px;
    font-weight: 500;
    font-size: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 200px;
    text-align: left;
  }
}
</style>
